<template>
	<view class="payment-page">
		<view class="payment-container">
			<view class="page-title">订单确认</view>
			<view class="order-info-card">
				<view class="card-header">
					<text class="header-title">订单信息</text>
				</view>
				<view class="order-details">
					<view class="detail-item">
						<text class="label">订单编号：</text>
						<text class="value">{{ orderInfo.orderNo }}</text>
					</view>
					<view class="detail-item">
						<text class="label">球桌：</text>
						<text class="value">{{ orderInfo.productName }}</text>
					</view>
					<view class="detail-item">
						<text class="label">预约日期：</text>
						<text class="value">{{ orderInfo.date }} {{ orderInfo.week }}</text>
					</view>
					<view class="detail-item">
						<text class="label">预约时间：</text>
						<text class="value">{{ orderInfo.timeSlot }}</text>
					</view>
					<view class="detail-item">
						<text class="label">时长：</text>
						<text class="value">{{ orderInfo.duration }}小时</text>
					</view>
				</view>
			</view>

			<view class="payment-info-card">
				<view class="card-header">
					<text class="header-title">费用明细</text>
				</view>

				<view class="payment-details">
					<view class="detail-item">
						<text class="label">单价：</text>
						<text class="value">￥{{ orderInfo.price }}/小时</text>
					</view>
					<view class="detail-item">
						<text class="label">时长：</text>
						<text class="value">{{ orderInfo.duration }}小时</text>
					</view>
					<view class="detail-item total-amount">
						<text class="label">总计：</text>
						<text class="value amount">￥{{ orderInfo.orderPayPrice }}</text>
					</view>
				</view>
			</view>

			<view class="payment-method">
				<view class="method-title">支付方式</view>
				<view class="method-item active">
					<view class="method-icon wechat-pay"></view>
					<text class="method-name">微信支付</text>
					<view class="method-selector">
						<view class="selector-inner"></view>
					</view>
				</view>
			</view>

			<!-- 添加10分钟未支付自动取消提示 -->
			<view class="auto-cancel-tip">
				<uni-icons type="info" size="16" color="#ff9900"></uni-icons>
				<text class="tip-text">温馨提示：订单10分钟内未支付将会自动取消，请尽快完成支付。</text>
			</view>

			<view class="payment-button-container">
				<button class="payment-button" @click="handlePayment">
					立即支付 ￥{{ orderInfo.orderPayPrice }}
				</button>
			</view>
		</view>

		<!-- 支付结果弹窗 -->
		<view class="payment-modal" v-if="showPaymentModal">
			<view class="modal-content">
				<view class="modal-close" @click="closePaymentModal">×</view>
				<view class="modal-icon" :class="paymentResult.status">
					<text v-if="paymentResult.status === 'success'">✓</text>
					<text v-else>✗</text>
				</view>
				<view class="modal-title">{{ paymentResult.title }}</view>
				<view class="modal-message">{{ paymentResult.message }}</view>
				<view class="modal-actions">
					<button class="modal-button" @click="closePaymentModal">{{ paymentResult.buttonText }}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {
	ref,
} from 'vue';
import {
	onLoad
} from '@dcloudio/uni-app';
import {
	getOrderDetails,
	payOrder
} from '@/services/order.js';
import {
	formatDateTimeRange
} from '@/utils/date.js';
// 订单信息
const orderInfo = ref({});

// 支付结果模态框
const showPaymentModal = ref(false);
const paymentResult = ref({
	status: 'success', // success 或 fail
	title: '',
	message: '',
	buttonText: ''
});

// 页面加载时获取参数
onLoad(async (options) => {
	if (options.orderNo) {
		try {
			// 调用接口获取订单详情
			const res = await getOrderDetails(options.orderNo);
			if (res.code === 200) {
				orderInfo.value = res.data
				const {
					formattedDate,
					formattedTimeSlot
				} = formatDateTimeRange(res.data.priceDateTimeRangeVOList);
				const datePart = formattedDate.split(' ')[0];
				const weekPart = formattedDate.split(' ')[1];
				Object.assign(orderInfo.value, {
					date: datePart,
					week: weekPart,
					timeSlot: formattedTimeSlot,
					duration: res.data.priceDateTimeRangeVOList.length,
					price: res.data.priceDateTimeRangeVOList[0].price
				});
			} else {
				throw new Error(res.message || '获取订单详情失败');
			}
		} catch (error) {
			console.error('获取订单详情失败:', error);
			uni.showToast({
				title: '订单数据获取失败',
				icon: 'none'
			});
		}
	} else {
		uni.showToast({
			title: '缺少订单信息',
			icon: 'none'
		});
	}
});

// 处理支付
const handlePayment = async () => {
	console.log('发起支付，订单号:', orderInfo.value.orderNo);

	const data = await payOrder(orderInfo.value.orderNo);
	if (data.code == 200) {
		const {
			timeStamp,
			nonceStr,
			packageVal,
			signType,
			paySign
		} = data.data;
		uni.requestPayment({
			provider: 'wxpay',
			timeStamp,
			nonceStr,
			package: packageVal,
			signType,
			paySign,
			success: async function (res) {
				paymentResult.value = {
					status: 'success',
					title: '支付成功',
					message: '您的订单已支付成功，可前往订单详情查看',
					buttonText: '查看订单'
				};
				showPaymentModal.value = true;
			},
			fail(error) {
				paymentResult.value = {
					status: 'fail',
					title: '支付失败',
					message: '支付未成功，请检查网络或更换支付方式后重试',
					buttonText: '重新支付'
				};
				showPaymentModal.value = true;
			},
		})
	} else {
		paymentResult.value = {
			status: 'fail',
			title: '支付失败',
			message: '支付未成功，请检查网络或更换支付方式后重试',
			buttonText: '重新支付'
		};
		showPaymentModal.value = true;
	};
}

// 关闭支付结果弹窗
const closePaymentModal = () => {
	showPaymentModal.value = false;
	if (paymentResult.value.status === 'success') {
		uni.navigateTo({
			url: `/pages/mine/orderDetail?orderNo=${orderInfo.value.orderNo}`
		})
	} else {
		// 跳转的我的订单页面
		uni.navigateTo({
			url: `/pages/mine/myOrder`
		})
	}
};
</script>

<style lang="scss">
.payment-page {
	min-height: 100vh;
	background: linear-gradient(110.13deg, rgba(172, 206, 242, 1) 0%, rgba(255, 255, 255, 1) 100%);
	padding: 15px;

	.payment-container {
		.page-title {
			font-size: 20px;
			text-align: center;
			margin: 10px 0 20px;
			font-weight: 700;
			color: rgba(81, 89, 245, 1);
		}

		.order-info-card,
		.payment-info-card {
			background-color: #fff;
			border-radius: 10px;
			margin-bottom: 15px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

			.card-header {
				padding: 15px;
				border-bottom: 1px solid #f0f0f0;

				.header-title {
					font-size: 16px;
					font-weight: bold;
					color: #333;
				}
			}

			.order-details,
			.payment-details {
				padding: 15px;

				.detail-item {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12px;

					&:last-child {
						margin-bottom: 0;
					}

					.label {
						color: #666;
						font-size: 14px;
						min-width: 160rpx;
					}

					.value {
						color: #333;
						font-size: 14px;
					}

					&.total-amount {
						margin-top: 10px;
						padding-top: 15px;
						border-top: 1px solid #f0f0f0;

						.amount {
							color: #ff6600;
							font-size: 18px;
							font-weight: bold;
						}
					}
				}
			}
		}

		.payment-method {
			background-color: #fff;
			border-radius: 10px;
			margin-bottom: 15px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			padding: 15px;

			.method-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				margin-bottom: 15px;
			}

			.method-item {
				display: flex;
				align-items: center;
				padding: 10px;
				border-radius: 8px;
				border: 1px solid #f0f0f0;

				&.active {
					border-color: #1aad19;
					background-color: #f6fff7;
				}

				.method-icon {
					width: 24px;
					height: 24px;
					border-radius: 50%;
					margin-right: 10px;

					&.wechat-pay {
						background-color: #1aad19;
						position: relative;

						&::after {
							content: '';
							position: absolute;
							top: 50%;
							left: 50%;
							width: 14px;
							height: 14px;
							background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M6.5 12.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5zM14.5 12.5c0-.8.7-1.5 1.5-1.5s1.5.7 1.5 1.5-.7 1.5-1.5 1.5-1.5-.7-1.5-1.5z'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.5 14.5c-.3.3-.7.5-1.1.5-.4 0-.8-.1-1.1-.4-.3-.3-.4-.7-.4-1.1 0-.4.1-.8.4-1.1.3-.3.7-.4 1.1-.4.4 0 .8.1 1.1.4.3.3.4.7.4 1.1 0 .4-.1.8-.4 1.1zm-9 0c-.3.3-.7.5-1.1.5-.4 0-.8-.1-1.1-.4-.3-.3-.4-.7-.4-1.1 0-.4.1-.8.4-1.1.3-.3.7-.4 1.1-.4.4 0 .8.1 1.1.4.3.3.4.7.4 1.1 0 .4-.1.8-.4 1.1z'/%3E%3C/svg%3E");
							background-size: contain;
							background-repeat: no-repeat;
							transform: translate(-50%, -50%);
						}
					}
				}

				.method-name {
					flex: 1;
					font-size: 14px;
					color: #333;
				}

				.method-selector {
					width: 20px;
					height: 20px;
					border: 1px solid #ccc;
					border-radius: 50%;

					.selector-inner {
						width: 12px;
						height: 12px;
						background-color: #1aad19;
						border-radius: 50%;
						margin: 3px;
						display: none;
					}
				}

				&.active {
					.selector-inner {
						display: block;
					}
				}
			}
		}

		// 添加自动取消提示样式
		.auto-cancel-tip {
			background-color: #fffce6;
			border: 1px solid #ffe58f;
			border-radius: 8px;
			padding: 12px 15px;
			margin-bottom: 20px;
			display: flex;
			align-items: center;

			.tip-text {
				color: #ff9900;
				font-size: 14px;
				margin-left: 8px;
			}
		}

		.payment-button-container {
			padding: 20px 0 10px;

			.payment-button {
				width: 100%;
				background-color: #165dff;
				color: #fff;
				border: none;
				padding: 15px;
				font-size: 16px;
				border-radius: 8px;
				font-weight: bold;
			}
		}
	}

	.payment-modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 9999;

		.modal-content {
			background-color: #fff;
			border-radius: 10px;
			width: 80%;
			max-width: 300px;
			padding: 25px 20px;
			text-align: center;
			position: relative;

			.modal-close {
				position: absolute;
				top: 15px;
				right: 15px;
				width: 24px;
				height: 24px;
				line-height: 24px;
				font-size: 20px;
				color: #999;
				cursor: pointer;
			}

			.modal-icon {
				width: 50px;
				height: 50px;
				border-radius: 50%;
				margin: 0 auto 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24px;
				font-weight: bold;

				&.success {
					background-color: #e8f8e8;
					color: #1aad19;
				}

				&.fail {
					background-color: #fae8e8;
					color: #e33;
				}
			}

			.modal-title {
				font-size: 18px;
				font-weight: bold;
				margin-bottom: 10px;
				color: #333;
			}

			.modal-message {
				font-size: 14px;
				color: #666;
				margin-bottom: 20px;
				line-height: 1.5;
			}

			.modal-button {
				background-color: #165dff;
				color: #fff;
				border: none;
				padding: 10px 20px;
				font-size: 14px;
				border-radius: 6px;
				width: 100%;
			}
		}
	}
}
</style>